import { FC, PropsWithChildren } from "react";
import { styled } from "styled-components";

interface LinkProps extends PropsWithChildren {
  href: string;
  className?: string;
}

const Link: FC<LinkProps> = (props) => {
  const {
    href,
    className,
    children
  } = props;

  return <a href={href} className={className}>{children}</a>
}
const StyledLink = styled(Link)<{$color?: string;}>`
  color: ${props => props.$color};
  font-size: 40px;
`

const StyledLink2 = styled(Link).attrs<{$color?: string}>((props) => {
  console.log(props)
  props.$color = 'orange'
  props.children = props.children + '123'
  return props
})`
  color: ${props => props.$color};
  font-size: 40px;
`

const Input = styled.input.attrs({type: 'checkbox'})`
  width: 30px;
  height: 30px;
`

const ColordText = styled.div`
  color: blue;
  &:hover {
    color: red;
  }

  &::before {
    content: '* ';
  }
`

export function StyledComponentsTest5() {
  return <div>
    <StyledLink href="aaa" $color="purple">click me</StyledLink>
    <StyledLink2 href="aaa" $color="purple">click me</StyledLink2>
    <Input />
    <ColordText>abin is good</ColordText>
  </div>
}